<template>
	<view class="dx-body">
		<dx-table
			ref="table"
			:header="tableHeader"
			:tableParams="tableParams"
			:buttons="['refresh', 'add', 'edit', 'del', 'toggle']"
			:isPagination="false"
		></dx-table>
		<!-- 权限生成 -->
		<dx-layer title="权限生成" v-model="showAuthLayer" ref="permissionRef" @confirm="confirm" :loading="loading" :isSync="true">
			<template v-if="showAuthLayer">
				<vxe-table
					ref="xPermissionTable"
					show-overflow
					:row-config="{ isHover: true, useKey: true, keyField: 'id' }"
					:column-config="{ resizable: true }"
					:tree-config="{ transform: true, line: true, expandAll: true, rowField: 'id', parentField: 'parentId' }"
					:data="tablePermissionData"
					:checkbox-config="{ labelField: 'id', checkAll: true }"
					:edit-config="{ trigger: 'click', mode: 'row' }"
				>
					<vxe-column type="checkbox" field="id" tree-node title="序号" width="180"> </vxe-column>
					<vxe-column field="name" title="权限名称" width="120" :edit-render="{}">
						<template #edit="{ row }">
							<el-input v-model="row.name" type="text"></el-input>
						</template>
					</vxe-column>
					<vxe-column field="permission_id" title="权限标识" :edit-render="{}">
						<template #default="{ row }">
							<el-tooltip effect="dark" :content="row.tips || '菜单标识关联权限标识，无需修改'" placement="top">
								<text>{{ row.permission_id }}</text>
							</el-tooltip>
						</template>
						<template #edit="{ row }">
							<el-input v-model="row.permission_id" type="text"></el-input>
						</template>
					</vxe-column>
					<vxe-column field="comment" title="备注" width="120" :edit-render="{}">
						<template #edit="{ row }">
							<el-input v-model="row.comment" type="text"></el-input>
						</template>
					</vxe-column>
				</vxe-table>
			</template>
		</dx-layer>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createPermission } from '@/uni_modules/dx-admin/api/index';
import { VxeTableInstance } from 'vxe-table';
import { arrayToTree, recursionPermission } from '@/uni_modules/dx-admin/libs/utils';
const tableHeader = reactive({
	tips: '菜单管理',
});
const tablePermissionData = ref<any>([]);
const table = ref();
const showAuthLayer = ref(false);
const xPermissionTable = ref<VxeTableInstance>();
const loading = ref(false);
const permissionRef = ref();
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		keyField: '_id',
	},
	treeConfig: {
		transform: true,
		rowField: 'menu_id',
		parentField: 'parent_id',
		expandAll: true,
		reserve: true,
	},
	checkboxConfig: { highlight: true },
	showOverflow: 'tooltip',
	urls: {
		index: 'menu/index',
		add: 'menu/add',
		edit: 'menu/edit',
		del: 'menu/del',
		multi: 'menu/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{
			label: '菜单名称',
			field: 'name',
			align: 'left',
			minWidth: '180px',
			treeNode: true,
			rules: [
				{
					required: true,
					message: '菜单名称不能为空',
				},
			],
		},
		{
			label: '父级菜单',
			field: 'parent_id',
			visible: false,
			operator: false,
			component: {
				name: 'dx-tree-select',
				props: {
					nodeKey: 'menu_id',
					url: 'menu/index',
					placeholder: '请选择父级菜单',
					props: {
						label: 'name',
						children: 'children',
					},
				},
			},
		},
		{
			label: 'Icon',
			field: 'icon',
			render: 'dx-icon',
			operator: false,
			width: '80px',
			component: {
				name: 'dx-icon-select',
			},
			rules: [
				{
					required: true,
					message: 'icon不能为空',
				},
			],
		},
		{
			label: '菜单标识',
			field: 'menu_id',
			minWidth: '180px',
			component: {
				name: 'el-input',
				props: {
					type: 'text',
					placeholder: '请输入菜单标识，(如:sys.menu.order)，后缀是控制器名称，可生成权限复用',
				},
			},
			rules: [
				{
					required: true,
					message: '菜单标识不能为空',
				},
			],
		},
		{
			label: '排序',
			field: 'sort',
			width: '100px',
			component: {
				name: 'el-input',
				props: {
					type: 'number',
					placeholder: '请输入排序',
				},
			},
		},
		{
			label: 'URL',
			field: 'url',
			minWidth: '180px',
		},
		{
			label: '是否链接',
			field: 'is_link',
			component: {
				name: 'el-switch',
			},
			width: '100px',
		},
		{
			label: '是否启用',
			field: 'enable',
			value: true,
			width: '100px',
			component: {
				name: 'el-switch',
			},
		},
		{ label: '备注', field: 'comment', minWidth: '100px' },
		{
			label: '创建时间',
			field: 'create_date',
			form: false,
			formatter: 'dxFormatDate',
			width: '180px',
		},
		{
			type: 'operate',
			label: '操作',
			align: 'left',
			width: '150px',
			fixed: 'right',
			operator: false,
			permission: ['dx-func-admin/menu/edit', 'dx-func-admin/menu/del', 'dx-func-admin/permission/add'],
			buttons: [
				'edit',
				'del',
				function (h: any, row: any) {
					if (!row.parent_id) {
						return h(
							ElButton,
							{
								type: 'primary',
								size: 'small',
								onClick: function () {
									ElMessageBox.prompt('请输入', '输入路由前缀(即云函数名称)', {
										confirmButtonText: '确定',
										cancelButtonText: '取消',
									})
										.then(({ value }) => {
											showAuthLayer.value = true;
											const permissions: { [key: string]: any }[] = [];
											recursionPermission(row, 0, permissions, value || '');
											tablePermissionData.value = permissions;
										})
										.catch(() => {});
								},
							},
							() => '权限'
						);
					}
				},
			],
		},
	],
});
onLoad(() => {
	nextTick(() => {
		// 加载表单数据
		table.value?.getTableList();
	});
});
//权限生成
function confirm() {
	const $table = xPermissionTable.value;
	const records1 = $table?.getCheckboxIndeterminateRecords();
	const records2 = $table?.getCheckboxRecords();
	const records: any = [];
	loading.value = true;
	records1?.map((item: any) => {
		records.push({
			id: item.id,
			parentId: item.parentId,
			name: item.name,
			permission_id: item.permission_id,
			permission_type: item.permission_type,
			comment: item.comment,
		});
	});
	records2?.map((item: any) => {
		records.push({
			id: item.id,
			parentId: item.parentId,
			name: item.name,
			permission_id: item.permission_id,
			permission_type: item.permission_type,
			comment: item.comment,
		});
	});
	createPermission(arrayToTree(records, 'id', 'parentId'))
		.then((res) => {
			if (res.code === 1000) {
				ElMessage.success(res.message);
				permissionRef.value?.close();
			} else {
				ElMessage.error(res.message);
			}
		})
		.finally(() => {
			loading.value = false;
		});
}
</script>

<style lang="scss"></style>
